<template>
  <div class="search">
    <div class="search-title">
      <form action="/">
        <van-search
          v-model.trim="ipt"
          show-action
          placeholder="商品搜索"
          @input="print"
          @cancel="onCancel"
          shape="round"
        />
      </form>
    </div>
    <div v-if="current == 'init'" class="init">
      <!-- 初始数据部分 -->
      <!-- 历史记录 -->
      <div class="init-title">
        <van-row type="flex" justify="space-between">
          <span>历史记录</span>
          <van-col span="6">
            <van-icon name="delete-o" @click="clearhistory" />
          </van-col>
        </van-row>
      </div>
      <div class="init-list">
        <div v-for="item in info.historyData" :key="item.id" class="init-item">
          {{ item.keyword }}
        </div>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div v-if="current == 'init'" class="init hot">
      <div class="init-title">
        <van-row type="flex" justify="space-between">
          <span>热门搜索</span>
        </van-row>
      </div>
      <div class="init-list">
        <div
          v-for="item in info.hotKeywordList"
          :key="item.id"
          class="init-item"
        >
          {{ item.keyword }}
        </div>
      </div>
    </div>

    <div v-else-if="current == 'notice'" class="notice">
      <!-- 用于展示提示部分 -->
      <ul class="product-list">
        <li v-for="item in tips" :key="item.id" @click="goGoods(item.name)">
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <div v-else class="goods">
      <!-- 用于展示商品部分 -->
      <div class="tabbar">
        <div>综合</div>
        <div class="tabbarprice">
          <div>价格</div>
          <div class="iconBox">
            <van-icon name="arrow-up" />
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div>分类</div>
      </div>
      <div>
        <div class="sub-list">
          <div class="sub-item" v-for="ele in goods" :key="ele.id">
            <img class="img" :src="ele.list_pic_url" alt="" />
            <p class="subitem-name">{{ ele.name }}</p>
            <p class="subitem-price">￥{{ ele.retail_price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  indexaction,
  helperaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/views/api/home/search";
import { Toast } from "vant";

export default {
  data() {
    return {
      current: "init", // current   init/notice/goods
      info: {},
      ipt: "",
      tips: [], // 提示部分
      goods: [], // 商品部分
      value: "",
    };
  },
  created() {},
  async created() {
    var res = await indexaction({
      openId: localStorage.getItem("openId"),
    });
    console.log(res);
    this.info = res;
  },
  mouted() {},
  methods: {
    goGoods(val) {
      this.current = "goods";
      helperaction({
        keyword: val,
        order: "",
      }).then((res) => {
        console.log(res);
        this.goods = res.keywords;
      });
      addhistoryaction({
        keyword: val,
        openId: localStorage.getItem("openId"),
      });
    },
    print() {
      if (!this.ipt) {
        this.current = "init";
        return;
      }
      this.current = "notice";
      helperaction({
        keyword: this.ipt,
        order: "",
      }).then((res) => {
        console.log(res);
        this.tips = res.keywords;
      });
    },
    onCancel() {
      window.history.go(-1);
    },
    clearhistory(obj) {
      clearhistoryAction({
        openId: localStorage.getItem("openId"),
      });
      this.$router.go(0);
    },
  },
};
</script>
<style scoped lang='scss'>
.search {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: 400;
  background-color: rgb(248, 248, 248);
}
.init {
  background-color: #fff;
  margin-top: 0.02667rem;
  padding: 0 0.53333rem;
  background-color: #fff;
}

.init-list {
  padding-top: 0.37333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
.init-item {
  margin-right: 0.13333rem;
  margin-bottom: 0.16rem;
  border: 0.01333rem solid rgb(226, 226, 226);
  padding: 0.16rem 0.30667rem;
  box-sizing: border-box;
  font-family: PingFangSC-Regular;
  font-size: 0.26667rem;
  color: #666;
  letter-spacing: 0;
  font-weight: 400;
}

.product-list {
  list-style: none;
  background-color: #fff;
}
.product-list li {
  font-size: 0.34667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.02667rem;
  height: 1.24rem;
  padding: 0 0.4372rem 0 0.69333rem;
}
.hot {
  margin-top: 0.26667rem;
}
.init-title {
  padding-top: 0.56rem;
}
.init-title span {
  font-family: PingFangSC-Medium;
  font-size: 0.34667rem;
  color: #000;
  letter-spacing: 0;
  font-weight: 500;
}

.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 1.33333rem;
  background-color: #fff;
}
.tabbarprice {
  display: flex;
  align-items: center;
  height: 100%;
}
.search-title {
  padding: 0.10667rem 0.29333rem 0.54667rem;
  background-color: #fff;
}

.iconBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sub-list {
  display: flex;
  flex-flow: row wrap;
  margin: 10px 10px;
}
.sub-item {
  width: 350px;
}

.sub-item img {
  background-color: #fff;
  width: 309px;
  padding: 15px;
}
</style>